<template>
  <div class="sid">
    <h2>　浏览次数：<span style="color: red;">123</span></h2>

    <div class="l_search">
      <div class="search_z">
        <el-input placeholder="请输入书名" v-model="input3" class="input-with-select">
          <el-select v-model="select" slot="prepend" placeholder="请选择">
            <el-option label="餐厅名" value="1"></el-option>
            <el-option label="订单号" value="2"></el-option>
            <el-option label="用户电话" value="3"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="hello()"></el-button>
        </el-input>
      </div>
    </div>
    <div class="sidmain">
      <div class="sid_l">
        <h4>书目信息</h4>
        <el-card class="box-card">
          <p><span>题名/责任者:</span>AAA英语辅导教材 雷功元编著</p>
          <p><span>出版社/出版年:</span>电子科技大学出版社 1994</p>
          <p><span>ISBN/定价:</span>7-81043-062-9 CNY29.50</p>
          <p><span>载体形态项:</span>368页 20cm</p>
          <p><span>个人责任者:</span>雷功元编著</p>
          <p><span>学科主题:</span>英语</p>
          <p><span>中图法分类号:</span>H31</p>
          <p><span>提要文摘附注:</span>本书《AAA英语》以其全新的教学思想，丰富的内容，生动的编排，吸引着海外千千万万华人英语爱好者。
            《辅导》分基本句子、语法注释、文化背景知识等。</p>
          <p><span>统一资源定位(URL):</span></p>
        </el-card>
        <div class="s_button">
          <el-row>

            <el-button type="primary">加入缓存书架</el-button>
            <el-button type="success">查看缓存书架（1）</el-button>
            <el-button type="info">收藏</el-button>
            <el-button type="warning">预约</el-button>
          </el-row>
        </div>
        <h4>馆藏信息</h4>

        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="日期" width="180">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="address" label="地址">
          </el-table-column>
        </el-table>

        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="借阅趋势" name="first">
            <div id="myChart"></div>
          </el-tab-pane>
          <el-tab-pane label="可能感兴趣的书" name="second">配置管理</el-tab-pane>
          <el-tab-pane label="同名作者" name="third">角色管理</el-tab-pane>
        </el-tabs>

      </div>
      <div class="sid_r">
        <div class="s_img">
          <h2>书籍封面</h2>
          <img src="../../../assets/images/tushu.jpg" alt="">
          <h2>相关资源</h2>
          <a href="https://book.douban.com/subject/6389886/" target="_blank">
            <img src="../../../assets/images/douban.jpg" alt="">
          </a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
    export default {
        data() {
            return {
                activeName: 'first',
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }],
                input3: '',
                select: ''
            }
        },
        methods: {
            // handleClick(tab, event) {
            //     console.log(tab, event);
            // },
            hello() {
                if (this.input3 == '' || this.input3 == undefined || this.input3 == null) {
                    this.$message.error('请输入文字')
                } else {
                    this.$router.push('/search?content=' + this.input3)
                        // this.$router.push(`/playlist?id=${id}`)
                }
            },
            echartsInit() {
                // 找到容器
                let myChart = this.$echarts.init(document.getElementById('myChart'))
                    // 开始渲染
                myChart.setOption({
                    title: {
                        text: '借阅趋势'
                    },
                    xAxis: {
                        type: 'category',
                        data: ['2016', '2017', '2018', '2019', '2020', '2021', '2022']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [10, 3, 5, 7, 9, 11, 13],
                        type: 'line'
                    }]
                })
            },
        },
        mounted() {
            this.echartsInit()
        }

    }
</script>
<style>
    .sid {
        padding: 30px;
    }

    .sidmain {
        display: flex;
    }

    .l_search {
        max-width: 800px;
        margin: 20px auto;
    }

    .sid_l {
        flex: 8;
    }

    .sid_l h4 {
        background-color: #e9e9e9;
        color: #2c70a1;
        border: 0px;
        height: 30px;
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
        border-bottom: 2px solid #2c70a1;
        font-size: 18px;
        width: 100px;
    }

    .sid_l .box-card p {
        line-height: 25px;
        border-bottom: 1px dotted #e5e5e5;
        padding: 10px 15px;
        font-size: 14px;
        color: #333333;
    }

    .box-card p span {
        font-weight: bold;
        margin-right: 10px;
    }

    .s_button {
        padding: 20px;
    }

    .text {
        font-size: 14px;
    }

    .item {
        padding: 18px 0;
    }

    .el-tabs__content {
        background-color: #fff;
        height: 250px;
    }

    .sid_r {
        flex: 2;
        position: relative;
    }

    .s_img {
        position: fixed;
        width: 200px;
        top: 300px;
        right: 50px;
        background-color: pink;
        height: 380px;
    }

    .s_img h2 {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 6px;
    }

    .s_img>img {
        width: 100%;
    }

    #myChart {
        width: 600px;
        height: 280px;
        margin-left: auto;
        margin-right: auto;
        float: left;
    }
</style>
